<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        html,body{
            height: 100%;
        }

        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
            color: rgba(0, 0, 0, 0.38);
        }
        a:hover{
            color: rgb(0, 0, 0);
            text-decoration: underline;
        }
        .box{
            width: 340px;
            height: 340px;
            margin: 100px auto;
            text-align: center;
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
            background: white;
            padding: 40px;
            position: relative;
            border-radius: 8px;
        }
        .form-add div{
            margin: 10px;
        }
        .big-box{
            width: 100%;
            height: 100%;
            background: url("images/bg.jpg");
            background-size: cover;
            overflow: hidden;
        }
        .form-add{
            padding: 0.11111111px;
        }
        .hat{
            margin: 10px 0 0 -58px;
            padding: 18px 150px 18px 0px;
            background: #189F92;
            position: relative;
            color: #fff;
            font-size: 20px;
        }
        .xakil{
            border: 1px solid #DCDEE0;
            vertical-align: middle;
            border-radius: 3px;
            height: 50px;
            padding: 0 16px;
            font-size: 14px;
            color: #555;
            outline: 0;
            width: 92%;
        }
        .btn{
            display: inline-block;
            padding: 12px 24px;
            margin: 0;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            color: #fff;
            background-color: #189F92;
            border-radius: 3px;
            border: none;
            -webkit-appearance: none;
            outline: 0;
            margin-top: 20px;
        }
        .q1{
            position: relative;
        }
        .q1 p{
            position: absolute;
            right: 0px;
        }
        .yzg-div{
            position: relative;
            height: 21px;
        }
        .yzm{
            position: absolute;
            right: 0;
            top: 2px;
        }
        .aas{
            position: absolute;
            left: 0;
            width:40%;
            height: 32px;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/jquery3.6.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery.validate.min.js"></script>
</head>
<body>
<div class="big-box" id="box">
    <div class="box">
        <div class="hat">系统登录</div>
        <div class="form-add" id="commentForm">
            <div>
                <input name="account" placeholder="用户名" class="xakil account" v-model="account">
            </div>
            <div>
                <input name="password" type="password" placeholder="密码" class="xakil password" v-model="password">
            </div>
            <div class="yzg-div">
                <img src="ImageServlet" alt="无法获取验证码" onclick="resetCode(this)" class="yzm">
                <input type="text" placeholder="验证码" class="xakil aas" v-model="iden" >
            </div>
            <div>
                <button style="width: 100%" class="btn" @click="sub">登录</button>
            </div>
            <div class="q1">
                <p><a href="#" >注册</a></p>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    const vue = {
        data(){
            return{
                account:null,
                password:null,
                iden:null,
                judge:null,
                json:[]
            }
        },
        methods:{
            sub:function () {
                var json = this.json;
                if ($(".account").val() != "" && $(".password").val()!= "" && $(".aas").val() != ""){
                    if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test($(".password").val())){
                        //判断验证码
                        json = login("VerCode",this.account,this.password,this.iden);
                        console.log(json.VerCode)
                        if (json.VerCode == false){
                            return alert("验证码错误")
                        }else {
                            //登录
                            json = login("login",this.account,this.password,this.iden);
                            console.log(json)
                            if (json.login == "账号或密码输入错误"){
                                alert("账号或密码输入错误")
                            }else {
                                location.href="buba/index.html";
                            }
                        }
                    }else
                        alert("密码格式不对")
                }
                if ($(".account").val() == "" && $(".password").val()== "" && $(".aas").val() == "")
                    return alert("请输入")
                if ($(".account").val() == "" && $(".password").val() != "" && $(".aas").val() != "")
                    return alert("输入用户名")
                if ($(".password").val() != "" && $(".account").val() == "" && $(".aas").val() == "")
                    return alert("输入用户名")
                if ($(".password").val() == "" && $(".account").val() != "" && $(".aas").val() != "")
                    return alert("输入密码")
                if ($(".password").val() == "" && $(".account").val() == "" && $(".aas").val() == "")
                    return alert("输入用户名,密码,验证码")
                if ($(".aas").val() == "" && $(".password").val() != "" && $(".account").val() != "")
                    return alert("输入验证码")
            }
        }
    }
    let app = Vue.createApp(vue).mount("#box")


    function login(e,account,password,iden) {
        let json1;
        $.ajax({
            type:"post",
            url: "LoginServlet?flag="+e,
            data: {
                "account":account,"password":password,"iden":iden
            },
            dataType:"json",
            async:false,
            success:function (json){
                json1 = json;
            }
        })
        return json1;
    }


    /**
     * 点击验证码刷新
     * @param el
     */
    function resetCode(el){
        el.src = "ImageServlet?" + Math.random();
    }

</script>
</html>

